

<template>
    <div class="box">
        <div class="content">
            <div class="left">
                <span @click="navClick(index, item.path)" v-for="(item, index) in navigation" :key="index"
                    :class="{ 'active': navActive === index }">
                    {{
                        item.title
                    }}
                </span>
                <div class="search">
                    <input placeholder="请输入搜索内容" />
                    <img :src="search" />
                </div>
            </div>
            <div class="right">
                <img :src="login" />
                <span>登录</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import search from '@/assets/img/搜索.svg';
import login from '@/assets/img/登录.svg';
import router from '@/router';

/**
 * 导航数据
 */
const navigation = ref<{ title: string, path: string }[]>([
    {
        title: '首页',
        path: '/home',
    },
    {
        title: '副业项目',
        path: '/dataType?type=1',
    },
    {
        title: '副业软件',
        path: '/dataType?type=2',
    },
    {
        title: '虚拟资源',
        path: '/dataType?type=3',
    },
]);

/**
 * 导航选中项
 */
const navActive = ref<number>(0);

/**
 * 导航点击页面跳转
 * @param index 选中下标
 * @param path 路由路径
 */
const navClick = (index: number, path: string) => {
    navActive.value = index;
    router.push(path);
}
</script>


<style scoped lang="less">
@import './index.less';
</style>
